import React, { useEffect, useState } from 'react'
import { withRouter } from 'react-router-dom'
import { Layout, Menu } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { connect } from 'react-redux'
import { getMenuList } from '@api'
import logo from '../../../assets/img/mylogo.jpg'
import './index.scss'


function SideMenu(props) {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  const [menu, setMenu] = useState([])
  const { role: { rights } } = JSON.parse(localStorage.getItem("token"))
  const iconList = {
    "/home": <UserOutlined />,
    "/user-manage": <UserOutlined />,
    "/user-manage/list": <UserOutlined />,
    "/right-manage": <UserOutlined />,
    "/right-manage/role/list": <UserOutlined />,
    "/right-manage/right/list": <UserOutlined />,
    "/news-manage": <UserOutlined />,
    "/news-manage/add": <UserOutlined />,
    "/news-manage/draft": <UserOutlined />,
    "/news-manage/category": <UserOutlined />,
    "/audit-manage": <UserOutlined />,
    "/audit-manage/audit": <UserOutlined />,
    "/audit-manage/list": <UserOutlined />,
    "/publish-manage": <UserOutlined />,
    "/publish-manage/unpublished": <UserOutlined />,
    "/publish-manage/published": <UserOutlined />,
    "/publish-manage/sunset": <UserOutlined />,
  }
  /*--------------------------------------------------hook调用方法-------------------------------------------------------------*/
  /*--------------------------------------------------hook调用方法-------------------------------------------------------------*/
  /*--------------------------------------------------hook调用方法-------------------------------------------------------------*/
  /*--------------------------------------------------hook调用方法-------------------------------------------------------------*/
  useEffect(() => {
    getMenuList({
      _embed: 'children'
    }).then((res) => {
      setMenu(res.data)
    })
  }, [])
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  /*-----------------------------------------------------jsx----------------------------------------------------------------*/
  return (
    <Layout.Sider trigger={null} collapsible collapsed={props.isCllooapsed}>
      <div style={{ display: "flex", height: "100%", "flexDirection": "column" }}>
        <div className="logo">{props.isCllooapsed ? '' : (
          <div>
            <img src={logo} alt='' />
            <span>新闻系统</span>
          </div>
        )}</div>
        <div style={{ flex: 1, "overflow": "auto" }}>
          <Menu theme="dark" mode="inline" selectedKeys={props.location.pathname} defaultOpenKeys={['/' + props.location.pathname.split('/')[1]]}>
            {
              menu.map((item) => {
                return (
                  item.children?.length === 0 ?
                    item.pagepermisson === 1 && rights.includes(item.key) ?
                      <Menu.Item key={item.key} icon={iconList[item.key]} onClick={() => { props.history.push(item.key) }}>
                        {item.title}
                      </Menu.Item>
                      : ''
                    :
                    item.pagepermisson === 1 && rights.includes(item.key) ?
                      <Menu.SubMenu key={item.key} icon={iconList[item.key]} title={item.title}>
                        {
                          item.children.map((item1) => {
                            return (
                              item1.pagepermisson === 1 && rights.includes(item.key) ?
                                <Menu.Item key={item1.key} icon={iconList[item1.key]} onClick={() => { props.history.push(item1.key) }}>{item1.title}</Menu.Item>
                                :
                                ''
                            )
                          })
                        }
                      </Menu.SubMenu>
                      :
                      ''
                )
              })
            }
          </Menu>
        </div>
      </div>
    </Layout.Sider>
  )
}
const mapStateToProps = (state) => {
  // state是通过sore传过来reduce的初始值 
  const isCllooapsed = state.CollApsedReducer.isCllooapsed
  return {
    isCllooapsed
  }
}
export default connect(mapStateToProps)(withRouter(SideMenu))
